<template>
  <div class="guide-apply-page">
    <!-- 面包屑导航 -->
    <div class="container mx-auto px-4 py-4">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/tour-guide' }"
          >导游服务</el-breadcrumb-item
        >
        <el-breadcrumb-item>申请成为导游</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 页面内容 -->
    <div class="container mx-auto px-4 py-8">
      <div class="max-w-4xl mx-auto">
        <!-- 页面标题 -->
        <div class="text-center mb-12">
          <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">
            申请成为导游
          </h1>
          <p class="text-gray-600 dark:text-gray-400">
            加入我们的导游团队，让您的专业服务帮助更多游客了解贵港
          </p>
        </div>

        <!-- 申请步骤 -->
        <el-steps :active="currentStep" finish-status="success" class="mb-12">
          <el-step title="基本信息" description="填写个人基本信息" />
          <el-step title="资质认证" description="上传相关证件" />
          <el-step title="专业信息" description="填写专业技能" />
          <el-step title="提交审核" description="等待平台审核" />
        </el-steps>

        <!-- 表单区域 -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-8">
          <!-- 步骤1：基本信息 -->
          <div v-if="currentStep === 0">
            <h2 class="text-xl font-bold mb-6 text-gray-900 dark:text-white">
              基本信息
            </h2>
            <el-form
              ref="basicFormRef"
              :model="basicForm"
              :rules="basicRules"
              label-position="top"
            >
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <el-form-item label="真实姓名" prop="name">
                  <el-input
                    v-model="basicForm.name"
                    placeholder="请输入真实姓名"
                  />
                </el-form-item>
                <el-form-item label="身份证号" prop="idNumber">
                  <el-input
                    v-model="basicForm.idNumber"
                    placeholder="请输入身份证号"
                  />
                </el-form-item>
                <el-form-item label="手机号码" prop="phone">
                  <el-input
                    v-model="basicForm.phone"
                    placeholder="请输入手机号码"
                  />
                </el-form-item>
                <el-form-item label="电子邮箱" prop="email">
                  <el-input
                    v-model="basicForm.email"
                    placeholder="请输入电子邮箱"
                  />
                </el-form-item>
                <el-form-item
                  label="现居地址"
                  prop="address"
                  class="md:col-span-2"
                >
                  <el-input
                    v-model="basicForm.address"
                    placeholder="请输入详细地址"
                  />
                </el-form-item>
              </div>
            </el-form>
          </div>

          <!-- 步骤2：资质认证 -->
          <div v-if="currentStep === 1">
            <h2 class="text-xl font-bold mb-6 text-gray-900 dark:text-white">
              资质认证
            </h2>
            <el-form
              ref="certFormRef"
              :model="certForm"
              :rules="certRules"
              label-position="top"
            >
              <div class="space-y-6">
                <el-form-item label="导游资格证" prop="guideCard">
                  <el-upload
                    class="upload-demo"
                    drag
                    action="/api/upload"
                    :on-success="handleGuideCardSuccess"
                    :before-upload="beforeUpload"
                  >
                    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                    <div class="el-upload__text">
                      将文件拖到此处，或<em>点击上传</em>
                    </div>
                    <template #tip>
                      <div class="el-upload__tip text-xs text-gray-500">
                        请上传导游资格证照片，支持jpg/png格式
                      </div>
                    </template>
                  </el-upload>
                </el-form-item>

                <el-form-item label="身份证正反面" prop="idCardPhotos">
                  <div class="grid grid-cols-2 gap-4">
                    <el-upload
                      class="upload-demo"
                      drag
                      action="/api/upload"
                      :on-success="handleIdCardFrontSuccess"
                      :before-upload="beforeUpload"
                    >
                      <div class="upload-content">
                        <el-icon class="el-icon--upload"
                          ><upload-filled
                        /></el-icon>
                        <div class="el-upload__text">上传身份证正面</div>
                      </div>
                    </el-upload>
                    <el-upload
                      class="upload-demo"
                      drag
                      action="/api/upload"
                      :on-success="handleIdCardBackSuccess"
                      :before-upload="beforeUpload"
                    >
                      <div class="upload-content">
                        <el-icon class="el-icon--upload"
                          ><upload-filled
                        /></el-icon>
                        <div class="el-upload__text">上传身份证反面</div>
                      </div>
                    </el-upload>
                  </div>
                </el-form-item>

                <el-form-item label="健康证" prop="healthCard">
                  <el-upload
                    class="upload-demo"
                    drag
                    action="/api/upload"
                    :on-success="handleHealthCardSuccess"
                    :before-upload="beforeUpload"
                  >
                    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                    <div class="el-upload__text">
                      将文件拖到此处，或<em>点击上传</em>
                    </div>
                    <template #tip>
                      <div class="el-upload__tip text-xs text-gray-500">
                        请上传有效期内的健康证照片
                      </div>
                    </template>
                  </el-upload>
                </el-form-item>
              </div>
            </el-form>
          </div>

          <!-- 步骤3：专业信息 -->
          <div v-if="currentStep === 2">
            <h2 class="text-xl font-bold mb-6 text-gray-900 dark:text-white">
              专业信息
            </h2>
            <el-form
              ref="professionalFormRef"
              :model="professionalForm"
              :rules="professionalRules"
              label-position="top"
            >
              <div class="space-y-6">
                <el-form-item label="从业年限" prop="experience">
                  <el-input-number
                    v-model="professionalForm.experience"
                    :min="0"
                    :max="50"
                    class="!w-full"
                  />
                </el-form-item>

                <el-form-item label="语言能力" prop="languages">
                  <el-select
                    v-model="professionalForm.languages"
                    multiple
                    placeholder="请选择掌握的语言"
                    class="!w-full"
                  >
                    <el-option label="中文" value="chinese" />
                    <el-option label="英语" value="english" />
                    <el-option label="粤语" value="cantonese" />
                    <el-option label="日语" value="japanese" />
                    <el-option label="韩语" value="korean" />
                  </el-select>
                </el-form-item>

                <el-form-item label="专长领域" prop="specialties">
                  <el-select
                    v-model="professionalForm.specialties"
                    multiple
                    placeholder="请选择专长领域"
                    class="!w-full"
                  >
                    <el-option label="历史文化" value="history" />
                    <el-option label="自然风光" value="nature" />
                    <el-option label="美食文化" value="food" />
                    <el-option label="民俗风情" value="folk" />
                    <el-option label="摄影指导" value="photography" />
                  </el-select>
                </el-form-item>

                <el-form-item label="服务价格" prop="price">
                  <el-input-number
                    v-model="professionalForm.price"
                    :min="100"
                    :step="50"
                    class="!w-full"
                  >
                    <template #prefix>¥</template>
                    <template #suffix>/天</template>
                  </el-input-number>
                </el-form-item>

                <el-form-item label="个人简介" prop="introduction">
                  <el-input
                    v-model="professionalForm.introduction"
                    type="textarea"
                    :rows="4"
                    placeholder="请介绍您的导游经历和特色服务"
                  />
                </el-form-item>
              </div>
            </el-form>
          </div>

          <!-- 步骤4：提交审核 -->
          <div v-if="currentStep === 3">
            <div class="text-center space-y-6">
              <el-icon class="text-6xl text-green-500"
                ><circle-check-filled
              /></el-icon>
              <h2 class="text-xl font-bold text-gray-900 dark:text-white">
                申请提交成功
              </h2>
              <p class="text-gray-600 dark:text-gray-400">
                您的申请已提交成功，我们将在3个工作日内完成审核，请耐心等待
              </p>
              <div class="flex justify-center space-x-4">
                <el-button type="primary" @click="goToUserCenter">
                  查看申请进度
                </el-button>
                <el-button @click="goToHome">返回首页</el-button>
              </div>
            </div>
          </div>

          <!-- 底部按钮 -->
          <div v-if="currentStep < 3" class="flex justify-between mt-8">
            <el-button v-if="currentStep > 0" @click="previousStep">
              上一步
            </el-button>
            <div v-else></div>
            <el-button type="primary" @click="nextStep">
              {{ currentStep === 2 ? "提交申请" : "下一步" }}
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { CircleCheckFilled, UploadFilled } from "@element-plus/icons-vue";

const router = useRouter();
const currentStep = ref(0);

// 基本信息表单
const basicFormRef = ref(null);
const basicForm = reactive({
  name: "",
  idNumber: "",
  phone: "",
  email: "",
  address: "",
});

// 资质认证表单
const certFormRef = ref(null);
const certForm = reactive({
  guideCard: "",
  idCardFront: "",
  idCardBack: "",
  healthCard: "",
});

// 专业信息表单
const professionalFormRef = ref(null);
const professionalForm = reactive({
  experience: 0,
  languages: [],
  specialties: [],
  price: 300,
  introduction: "",
});

// 表单验证规则
const basicRules = {
  name: [
    { required: true, message: "请输入真实姓名", trigger: "blur" },
    { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" },
  ],
  idNumber: [
    { required: true, message: "请输入身份证号", trigger: "blur" },
    {
      pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
      message: "请输入正确的身份证号",
      trigger: "blur",
    },
  ],
  phone: [
    { required: true, message: "请输入手机号码", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入正确的手机号码",
      trigger: "blur",
    },
  ],
  email: [
    { required: true, message: "请输入电子邮箱", trigger: "blur" },
    { type: "email", message: "请输入正确的邮箱地址", trigger: "blur" },
  ],
  address: [{ required: true, message: "请输入现居地址", trigger: "blur" }],
};

const certRules = {
  guideCard: [
    { required: true, message: "请上传导游资格证", trigger: "change" },
  ],
  idCardFront: [
    { required: true, message: "请上传身份证正面照片", trigger: "change" },
  ],
  idCardBack: [
    { required: true, message: "请上传身份证反面照片", trigger: "change" },
  ],
  healthCard: [{ required: true, message: "请上传健康证", trigger: "change" }],
};

const professionalRules = {
  experience: [{ required: true, message: "请输入从业年限", trigger: "blur" }],
  languages: [
    { required: true, message: "请选择语言能力", trigger: "change" },
    { type: "array", min: 1, message: "至少选择一种语言", trigger: "change" },
  ],
  specialties: [
    { required: true, message: "请选择专长领域", trigger: "change" },
    {
      type: "array",
      min: 1,
      message: "至少选择一个专长领域",
      trigger: "change",
    },
  ],
  price: [{ required: true, message: "请设置服务价格", trigger: "blur" }],
  introduction: [
    { required: true, message: "请填写个人简介", trigger: "blur" },
    { min: 50, max: 500, message: "长度在 50 到 500 个字符", trigger: "blur" },
  ],
};

// 上传相关方法
const beforeUpload = (file) => {
  const isImage = file.type.startsWith("image/");
  if (!isImage) {
    ElMessage.error("只能上传图片文件!");
    return false;
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    ElMessage.error("上传图片大小不能超过 2MB!");
    return false;
  }
  return true;
};

const handleGuideCardSuccess = (response) => {
  certForm.guideCard = response.url;
};

const handleIdCardFrontSuccess = (response) => {
  certForm.idCardFront = response.url;
};

const handleIdCardBackSuccess = (response) => {
  certForm.idCardBack = response.url;
};

const handleHealthCardSuccess = (response) => {
  certForm.healthCard = response.url;
};

// 步骤控制
const nextStep = async () => {
  if (currentStep.value === 0) {
    await basicFormRef.value.validate((valid) => {
      if (valid) {
        currentStep.value++;
      }
    });
  } else if (currentStep.value === 1) {
    await certFormRef.value.validate((valid) => {
      if (valid) {
        currentStep.value++;
      }
    });
  } else if (currentStep.value === 2) {
    await professionalFormRef.value.validate((valid) => {
      if (valid) {
        submitApplication();
      }
    });
  }
};

const previousStep = () => {
  if (currentStep.value > 0) {
    currentStep.value--;
  }
};

// 提交申请
const submitApplication = async () => {
  try {
    // TODO: 调用提交申请API
    await new Promise((resolve) => setTimeout(resolve, 1000));
    currentStep.value++;
    ElMessage.success("申请提交成功");
  } catch (error) {
    console.error("提交申请失败:", error);
    ElMessage.error("提交申请失败，请重试");
  }
};

// 导航方法
const goToUserCenter = () => {
  router.push("/user/applications");
};

const goToHome = () => {
  router.push("/");
};
</script>

<style lang="scss" scoped>
.guide-apply-page {
  @apply min-h-screen bg-gray-50 dark:bg-gray-900;

  :deep(.el-upload-dragger) {
    @apply w-full bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700;

    &:hover {
      @apply border-primary-500 dark:border-primary-400;
    }
  }

  :deep(.el-upload__tip) {
    @apply text-gray-500 dark:text-gray-400;
  }

  .upload-content {
    @apply flex flex-col items-center justify-center p-6;
  }
}
</style>
